<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../../styles/common.css"/>
    <link rel="stylesheet" href="../../../styles/page.css"/>
    <link rel="stylesheet" href="../../../styles/bttn.min.css"/>
</head>
<body>
<div class="addBrand-container" id="activity-add-app">
    <div class="container">
        <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                :inline="false"
                label-width="180px"
                class="demo-ruleForm"
        >
            <el-form-item prop="activityTitle">
                <span slot="label" style="font-size: 18px">
                    活动名称：
                </span>
                <el-input v-model="ruleForm.activityTitle" placeholder="请输入活动名称" maxlength="20"/>
            </el-form-item>
            <el-form-item prop="activityDate">
                <span slot="label" style="font-size: 18px">
                    活动开始日期：
                </span>
                <el-date-picker
                        v-model="ruleForm.activityDate"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="getDate"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item prop="activityBtime">
                                <span slot="label" style="font-size: 18px">
                    活动开始时间：
                </span>
                <el-time-select
                        placeholder="起始时间"
                        v-model="ruleForm.activityBtime"
                        :picker-options="{
                          start: '08:00',
                          step: '00:30',
                          end: '21:00'
                        }">
                </el-time-select>
            </el-form-item>
            <el-form-item prop="activityEtime">
                                           <span slot="label" style="font-size: 18px">
                    活动结束时间：
                </span>
                <el-time-select
                        placeholder="结束时间"
                        v-model="ruleForm.activityEtime"
                        :picker-options="{
                          start: '08:00',
                          step: '00:30',
                          end: '21:00',
                          minTime: ruleForm.activityBtime
                        }">
                </el-time-select>
            </el-form-item>

            <el-form-item prop="activityAddress">
                 <span slot="label" style="font-size: 18px">
                    活动地点：
                </span>
                <el-input
                        v-model="ruleForm.activityAddress"
                        placeholder="请输入活动地点"
                        maxlength="30"
                />
            </el-form-item>
            <el-form-item prop="activityIntro">
                                 <span slot="label" style="font-size: 18px">
                    活动简介：
                </span>
                <el-input
                        v-model="ruleForm.activityIntro"
                        placeholder="请输入活动简介"
                        maxlength="50"

                />
            </el-form-item>
            <el-form-item
                    prop="region"
                    class="uploadImg"
            >
                    <span slot="label" style="font-size: 18px">
                    活动封面：
                </span>
                <el-upload
                        class="avatar-uploader"
                        action="/common/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :on-change="onChange"
                        ref="upload"
                        :before-upload="beforeUpload"
                >
                    <img
                            v-if="imageUrl"
                            :src="imageUrl"
                            class="avatar"
                    ></img>
                    <i
                            v-else
                            class="el-icon-plus avatar-uploader-icon"
                    ></i>

                </el-upload>
                1:1比例最佳 封面尽量展示活动信息<br/>
                只支持 jpg、png格式图片 文件大小不能超过10MB
            </el-form-item>
            <el-form-item prop="activityContent">
                 <span slot="label" style="font-size: 18px">
                    活动具体内容：
                </span>
                <el-input
                        v-model="ruleForm.activityContent"
                        maxlength="1000"
                        type="textarea"
                        style="width: 800px"
                        :autosize="{ minRows: 6, maxRows: 10}"
                        :before-upload="beforeUpload"
                />
            </el-form-item>
            <div class="subBox address">
                <el-form-item>
                    <el-button @click="goBack()" round>
                        取消
                    </el-button>
                    <el-button
                            type="primary"
                            @click="submitForm('ruleForm', false)"
                            round
                    >
                        保存
                    </el-button>
                    <el-button
                            v-if="actionType == 'add'"
                            type="primary"
                            @click="submitForm('ruleForm', true)"
                            round

                    >
                        保存并继续添加
                    </el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<script src="../../../js/request.js"></script>
<script src="../../../api/activity.js"></script>
<script src="../../../js/validate.js"></script>
<script src="../../../js/index.js"></script>
<script>
    new Vue({
        el: '#activity-add-app',
        data() {
            return {
                id: '',
                actionType: '',
                imageUrl: '',
                startTime: '',
                endTime: '',
                dateTime: '',
                ruleForm: {
                    activityAddress: '',
                    activityContent: '',
                    activityTitle: '',
                    activityIntro: '',
                    activityBtime: '',
                    activityEtime: '',
                    activityCover: '',
                    activityDate: '',
                    publisherId: ''
                }
            }
        },
        computed: {
            rules() {
                return {
                    activityTitle: [{required: true, message: '请输入活动名称！'}],
                    activityAddress: [{required: true, message: '请输入活动地址！'}],
                    activityIntro: [{required: true, message: '请输入活动简介！'}],
                    activityContent: [{required: true, message: '请输入活动具体内容！'}],
                    activityDate: [{required: true, message: '请输入活动日期！'}],
                    activityBtime: [{required: true, message: '请输入活动开始时间！'}],
                    activityEtime: [{required: true, message: '请输入活动结束时间！'}],
                }
            }
        },
        created() {
            if (window.localStorage.getItem('adminInfo') === null) {
                window.location.href = '../login/loginBackend.html'
            }
            this.id = requestUrlParam('id')
            this.actionType = this.id ? 'edit' : 'add'
            if (this.id) {
                this.init()
            }
        },
        mounted() {
        },
        methods: {
            async init() {
                queryActivityById(this.id).then(res => {
                    if (String(res.code) === '1') {
                        // console.log(res.data)
                        this.ruleForm = res.data
                        this.imageUrl = `/common/download?name=${res.data.activityCover}`
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },
            getDate(date) {
                this.dateTime = date
            },
            submitForm(formName, st) {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        //调用接口保存
                        if (this.actionType === 'add') {
                            this.ruleForm.publisherId = JSON.parse(localStorage.getItem('adminInfo')).id;
                            const params = {
                                ...this.ruleForm,
                            }
                            console.log(this.ruleForm.activityCover + '===')
                            addActivity(params).then(res => {
                                if (res.code === 1) {
                                    this.$message.success('活动添加成功！')
                                    if (!st) {
                                        this.goBack()
                                    } else {
                                        this.ruleForm = {
                                            activityAddress: '',
                                            activityContent: '',
                                            activityTitle: '',
                                            activityIntro: '',
                                            activityBtime: '',
                                            activityEtime: '',
                                            activityCover: '',
                                            activityDate: '',
                                            publisherId: '',
                                        }
                                        location.reload();
                                    }
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        } else {
                            const params = {
                                ...this.ruleForm,
                            }
                            editActivity(params).then(res => {
                                if (res.code === 1) {
                                    this.$message.success('活动修改成功！')
                                    this.goBack()
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        }
                    } else {
                        this.$message.error('请完善活动相关信息！');
                        return false;
                    }
                });


            },
            handleAvatarSuccess(response, file, fileList) {
                // 拼接down接口预览
                if (response.code === 0 && response.msg === '未登录') {
                    window.top.location.href = '../../login/loginBackend.html'
                } else {
                    this.imageUrl = `/common/download?name=${response.data}`
                    this.ruleForm.activityCover = response.data
                }
            },
            goBack() {
                window.parent.menuHandle({
                    id: '1',
                    url: 'activity/list.html',
                    name: '活动管理'
                }, false)
            },
            onChange() {

            },
            beforeUpload(file) {
                var FileExt = file.name.replace(/.+\./, "");
                if (['jpg','png'].indexOf(FileExt.toLowerCase()) === -1){
                    this.$message({
                        type: 'warning',
                        message: '请上传后缀名为jpg、png的文件！'
                    });
                    return false;
                }
                let imgSize = Number(file.size / 1024 / 1024);
                if (imgSize > 10) {
                    this.$message({
                        type: 'warning',
                        message: '图片大小不能超过10MB！'
                    });
                    return false;
                }

            }
        }
    })
</script>
</body>
</html>